import PropTypes from 'prop-types'
import { useEffect, useRef } from 'react'
import { AiEditor } from 'aieditor'

const ArticleForm = (props) => {

  //定义 ref
  const divRef = useRef(null)
  const aiEditorRef = useRef(null)

  //初始化 AiEditor
  useEffect(() => {
    if (divRef.current) {
      aiEditorRef.current = new AiEditor({
        element: divRef.current,
        placeholder: '点击输入内容...',
        content: '',
        contentIsMarkdown: true,
        contentRetention: true,
        draggable: true,
        pasteAsText: false,
        editable: false
      })
      return () => {
        aiEditorRef.current.destroy()
      }
    }
  }, [])

  useEffect(() => {
    aiEditorRef.current.setMarkdownContent(props.content)
  }, [aiEditorRef, props.content])

  return (
    <div ref={divRef} style={{ height: '500px' }} />
  )
}

ArticleForm.propTypes = {
  content: PropTypes.string
}

export default ArticleForm